<template>
  <a-drawer
    :bodyStyle="{overflow: 'auto' }"
    :destroyOnClose="true"
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="true"
    :mask="true"
    :closable="true"
    @close="close"
  >
   <!-- onlyoffice展示 -->
   <div class='qualityManual-container'>
       <div class='qualityManual-container-office'>
           <vab-only-office id="office-preview" :documentServerUrl='documentServerUrl' :config="config" />
       </div>
   </div>
  </a-drawer>

</template>

<script>

import { SysMixin } from '@/mixins/SysMixin'
import defaultSettings from '@/config/defaultSettings'
import vabOnlyOffice from './onlyofficeUtil/index.vue'
export default {
    name: 'onlyofficeEditForm',
    components: {vabOnlyOffice},
    mixins: [SysMixin],
    props: {

    },
    data () {
        return {
            defaultSettings,
            visible: false,
            width: document.documentElement.clientWidth,
            model: '',
            confirmLoading: false,
            title: '',
            documentServerUrl: "http://192.168.5.185:6831/",
            config: {
               document: {
                   fileType: "",
                   key: "",
                   title: "",
                   url: ""
               },
               documentType: "",
               editorConfig: {
                   callbackUrl: "http://192.168.5.199:9091/wx/onlyofficeController/callbackSave", 
                      lang: "zh-CN", // 中文
                      // "mode": "view",//查看模式
                      mode: "edit",//编辑模式
                      customization:{
                        forcesave:true,
                        autosave:false
                    }
               }
           }
         
        }
    },

    methods: {
        edit (record) {
               this.visible = true 
               this.config.document.fileType=record.fileType
               this.config.document.key=record.version
               this.config.document.title=record.fileName
               this.config.document.url=this.defaultSettings.fileServer+"/"+record.fileSite
               if(record.fileType== 'docx'){
                  this.config.documentType="word"
               }
               if(record.fileType== 'xlsx'){
                  this.config.documentType="cell"
               }
               if(record.fileType== 'pptx'){
                  this.config.documentType="slide"
               }
               if(record.fileType== 'pdf'){
                  this.config.documentType="word"
               }
               console.log(this.defaultSettings.fileServer+"/"+record.fileSite+"文件路径")
        },
        ok () {
          
        },
        cancel () {
            this.visible = false
            this.$emit('handleCancel')
        },
        close () {
            this.visible = false
            this.$emit('close')
        },

        emitChangeHandler (changeItem) {
            this.$emit('handlerChange', changeItem)
        },
        emitClickHandler (field, form) {
            this.$emit('handlerClick', field, form)
        },
        getForm () {
            return this.$refs.LForm.form
        },
    }

}
</script>
<style  scoped lang="less">
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px 16px;
    left: 0;
    text-align: right;
    border-top: 1px solid var(--component-border-color) !important;
    background: var(--drawer-header-background-color) !important;
    border-radius: 0 0 2px 2px;
    z-index: 999999;
  }
  .qualityManual-container {
      padding: 0 !important;
      width: 100%;
      height: calc(100vh - 50px);
  }
   
  .qualityManual-container-office {
      width: 100%;
      height: calc(100% - 55px);
  }

</style>
